import { ReactElement, useEffect, useState } from 'react';
import { CustomIcon } from '../../components';
import styles from './index.module.less';
import HomeUI from './HomeUI';
import { FormInstance } from 'antd';

export type MENU_LIST_TYPE = {
    name: string;
    contentText: string;
    suffix?: ReactElement;
    disabled?: boolean;
    prefix: ReactElement;
    command?: () => void;
    items?: any;
}
const Home = () => {
    const [loading, setLoading] = useState(false);
    const [dataSource, setDataSource] = useState<any[]>([{}, {}]);
    const [isAddOpen, setIsAddOpen] = useState<boolean>(false);
    const [addModalTitle, setAddModalTitle] = useState<string>('');
    const [selectedKeys, setSelectedKeys] = useState<['all' | 'md' | 'excel']>(['all'])

    const [addIsFolderOpen, setAddIsFolderOpen] = useState<boolean>(false);
    useEffect(() => {
        loadMoreData();
    }, []);
    const loadMoreData = () => {
        if (loading) {
            return;
        }
        setLoading(true);
        fetch('https://randomuser.me/api/?results=20&inc=name,gender,email,nat,picture&noinfo')
            .then((res) => res.json())
            .then((body) => {
                setDataSource([...dataSource, ...body.results]);
                setLoading(false);
            })
            .catch(() => {
                setLoading(false);
            });
    };

    const changeIcons = (type: string) => {
        switch (type) {
            case 'md':
                return <CustomIcon str='markdown-line' />
            case 'excel':
                return <CustomIcon str='file-excel-2-line' />
        }
    }
    const addDocument = () => {
        setAddModalTitle('新建文档')
        setIsAddOpen(true)
    }
    const addExcel = () => {
        setAddModalTitle('新建表格')
        setIsAddOpen(true)
    }
    const menuList: MENU_LIST_TYPE[] = [
        {
            name: '新建文档',
            contentText: '文档、表格、画板',
            suffix: <CustomIcon str='arrow-down-s-line' />,
            prefix: <CustomIcon str='file-add-line' />,
            items: [{
                label: <div onClick={addDocument}>
                    <span className={styles.menuListIcon}>
                        <CustomIcon str='markdown-line' />
                    </span>
                    新建文档
                </div>,
                key: '0',
            },
            {
                label: <div onClick={addExcel}>
                    <span className={styles.menuListIcon}>
                        <CustomIcon str='file-excel-2-line' />
                    </span>
                    新建表格
                </div>,
                key: '1',
            },]
        },
        {
            name: '新建文件夹',
            contentText: '使用文件夹整理知识',
            prefix: <CustomIcon str='folder-add-line' />,
            command: () => { setAddIsFolderOpen(true) },
            disabled: true,
        }
    ]
    const items = [
        {
            label: <><span className={styles.menuIcon}><CustomIcon str='star-line' /><CustomIcon str='star-fill' /></span> 收藏</>,
            key: '0',
        },
        {
            label: <><span className={styles.menuIcon}><CustomIcon str='brush-2-line' /></span> 移除记录</>,
            key: '1',
        },
        {
            label: <><span className={styles.menuIcon}><CustomIcon str='share-box-line' /></span> 浏览器打开</>,
            key: '3',
        },
    ]
    const filterList: any = [
        {
            name: '类型',
            items: [
                {
                    label: '所有',
                    key: 'all'
                },
                {
                    label: '文档',
                    key: 'md'
                },
                {
                    label: '表格',
                    key: 'excel'
                }
            ]
        },
        {
            name: '归属',
            items: [
                {
                    label: '所有',
                    key: 'all'
                },
            ]
        },
    ]
    const onAddFolderOk = async ({ form }: { form: FormInstance<any> }) => {
        try {
            const { folderName, folderDescribe } = await form.validateFields();
            console.log(folderName, folderDescribe);
            form.resetFields()
            setAddIsFolderOpen(false);
            // 跳转逻辑
        } catch (error) {
            console.log(error)
        }
    }
    const onAddFolderCancel = ({ cancel }: { cancel: () => void; }) => {
        cancel()
        setAddIsFolderOpen(false)
    }
    return <HomeUI
        menuList={menuList}
        filterList={filterList}
        dataSource={dataSource}
        changeIcons={changeIcons}
        selectedKeys={selectedKeys}
        setSelectedKeys={setSelectedKeys}
        loadMoreData={loadMoreData}
        items={items}
        addModalTitle={addModalTitle}
        isAddOpen={isAddOpen}
        setIsAddOpen={setIsAddOpen}
        addIsFolderOpen={addIsFolderOpen}
        onOk={onAddFolderOk}
        onCancel={onAddFolderCancel} />;
};

export default Home;